<template>
  <div class="cart">
    <div class="cartdesc">
      <div class= "cart-left">
        <div class="count" :class="totalcount > 0 ? 'chargColor' : ''" style="position: fixed;" v-show="totalcount > 0">
          {{totalcount}}
        </div>
        <div class="logo-warrper" @click="clickshow">
          <div class="logo" :class="totalcount > 0 ? 'chargColor1' : ''">
            <i :class="totalcount > 0 ? 'chargColor2' : 'chargColor3'" class="iconfont">&#xe705;</i>
          </div>
        </div>
        <div class="price" :class="totalPrice > 0 ? 'chargColor4' : ''">
          ￥{{totalPrice}}
        </div>
        <div class="desc">
          另需配送费￥{{this.desc}}元
        </div>
      </div>
      <div class= "cart-right">
        <div class="pay" :class = "payclass">
          {{pay}}
        </div>
      </div>
    </div>
    <div class="ball-container">
      <transition-group v-on:beforeEnter="beforeEnter" v-on:enter="enter" v-on:afterEnter="afterEnter">
        <div class="iconfont innericon" v-for="(ball, index) in balls" v-show="ball.show" :key="index">
          <div class="inner">&#xe705;</div>
        </div>
      </transition-group>
    </div>
    <div class="cartList" v-show="cartshow" @click="cartshow = false">
      <transition name="carttransition">
        <div class="foodList" v-show="cartshow" v-on:click.stop="">
          <div class="foodList-header" style="height: 40px; background: #f3f5f7;">
            <span style="line-height: 40px; font-size: 14px; color: rgb(7,17,27); font-weight: 200; margin-left: 18px;">
              购物车
            </span>
            <span style="line-height: 40px; font-size: 12px; color: rgb(0,160,220); font-weight: 200; margin-right: 18px; float: right;" @click="del">
              清空
            </span>
          </div>
          <scroller style="max-height: 160px; position: relative;">
            <div>
              <ul style="margin: 0; padding: 0; margin-left: 18px;">
                <li v-for="cartfood in  selectFoods" :key="cartfood.id" style="list-style: none; font-size: 14px; line-height: 40px; color: rgb(7,17,27); display: flex;">
                  <div style="flex: 1;">
                    <span>{{cartfood.title}}</span>
                    <span style="float: right; display: block; color: rgb(240, 20, 20); margin-right: 12px;">
                      <span style="display: inline-block; font-size: 10px;">￥</span>
                      <span style="display: inline-block; font-size: 14px;">{{cartfood.price * cartfood.num}}</span>
                    </span>
                  </div>
                  <div class="control" style="float: right; height:40px; flex: 0 0 100px;">
                    <div class="iconfont control-inner" style="font-size: 24px;" @click="decreaseclick(cartfood.id)">
                      &#xe637;
                    </div>
                    <div class="cartNum">
                      {{cartfood.num}}
                    </div>
                    <div class="cartAdd iconfont" @click="addclick(cartfood.id)">
                      &#xe644;
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </scroller>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cart',
  data () {
    return {
      minPrices: 20,
      balls: [{
        show: false
      }],
      dropBall: [],
      cartshow: false
    }
  },
  props: {
    selectFoods: {
      type: Array,
      default () {
        return []
      }
    },
    desc: {
      type: Number,
      default: 4
    }
  },
  computed: {
    totalPrice () {
      let total = 0
      this.selectFoods.forEach((food) => {
        total += food.price * food.num
      })
      return total
    },
    totalcount () {
      let total = 0
      this.selectFoods.forEach((food) => {
        total += food.num
      })
      return total
    },
    poorPrices () {
      let total = 0
      this.selectFoods.forEach((food) => {
        total += food.price * food.num
      })
      return this.minPrices - total
    },
    pay () {
      if (this.totalPrice === 0) {
        return `￥${this.minPrices}起送`
      }
      if (this.totalPrice > 0 && this.totalPrice < this.minPrices) {
        return `还差￥${this.poorPrices}起送`
      }
      if (this.totalPrice >= this.minPrices) {
        return '去结算'
      }
    },
    payclass () {
      if (this.totalPrice < this.minPrices) {
        return 'no-paycolor'
      } else {
        return 'paycolor'
      }
    }
  },
  methods: {
    drop (el) {
      for (let i = 0; i < this.balls.length; i++) {
        let ball = this.balls[i]
        if (!ball.show) {
          ball.show = true
          ball.el = el
          this.dropBall.push(ball)
          return
        }
      }
    },
    beforeEnter (el) {
      let count = this.balls.length
      while (count--) {
        let ball = this.balls[count]
        if (ball.show) {
          let rect = ball.el.getBoundingClientRect()
          let x = rect.left
          let y = -(rect.top)
          el.style.display = ''
          el.style.webikittransform = `translate3d(0, ${y}px, 0)`
          el.style.transform = `translate3d(0, ${y}px, 0)`
          let inner = el.getElementsByClassName('inner')[0]
          inner.style.webkitTransform = `translate3d(${x}px, 0, 0)`
          inner.style.transform = `translate3d(${x}px, 0, 0)`
          console.log(x)
          console.log(y)
          console.log(el.style.webikittransform)
          console.log(inner.style.webkitTransform)
        }
      }
    },
    enter (el) {
      this.$nextTick(() => {
        el.style.webikittransform = 'translate3d(0, 0, 0)'
        el.style.transform = 'translate3d(0, 0, 0)'
        let inner = el.getElementsByClassName('inner')[0]
        inner.style.webkitTransform = 'translate3d(0, 0, 0)'
        inner.style.transform = 'translate3d(0, 0, 0)'
      })
    },
    afterEnter (el) {
      let ball = this.dropBall.shift()
      if (ball) {
        ball.show = false
        el.style.display = ''
      }
    },
    addclick (id) {
      this.$emit('addnumchargn', id)
    },
    decreaseclick (id) {
      this.$emit('decreasenumchargn', id)
      console.log(this.selectFoods.length)
      if (this.selectFoods.length === 1 && this.selectFoods[0].num === 0) {
        this.cartshow = false
      }
    },
    del () {
      let obj = []
      if (this.selectFoods.length > 0) {
        for (let i = 0; i < this.selectFoods.length; i++) {
          obj.push(this.selectFoods[i].id)
        }
      }
      this.$emit('cartdel', obj)
      this.cartshow = false
    },
    clickshow () {
      if (this.selectFoods.length === 0) {
        this.cartshow = false
      } else {
        this.cartshow = !this.cartshow
      }
    }
  }
}
</script>

<style scoped>
.cart{
position: fixed;
bottom: 0;
height: 46px;
width: 100%;
}
.cartdesc{
position: fixed;
bottom: 0;
height: 46px;
display: flex;
background: #141d27;
width: 100%;
z-index: 50;
}
.cart-left{
flex: 1;
}
.logo-warrper{
height: 50px;
width: 50px;
border-radius: 50%;
position: relative;
bottom: 12px;
background: #141d27;
left: 12px;
display: inline-block;
}
.logo{
height: 44px;
width: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
margin: 3px;
position: relative;
top: 3px;
text-align: center;
}
.price{
display: inline-block;
font-size: 16px;
font-weight: 700;
color: rgba(255, 255, 255, 0.4);
display: inline-block;
margin-left: 12px;
padding-right: 12px;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.desc{
display: inline-block;
color: rgba(255, 255, 255, 0.4);
margin-left: 12px;
font-size: 14px;
}
.cart-right{
flex: 0 0 105px;
width: 105px;
background: rgba(255, 255, 255, 0.2);
}
.pay{
text-align: center;
line-height: 46px;
font-size: 12px;
font-weight: 700;
color: rgba(255, 255, 255, 0.4);
}
.count{
height: 18px;
line-height: 18px;
min-width: 24px;
position: fixed;
border-radius: 18px;
background: red;
left: 40px;
bottom: 40px;
z-index: 10;
}
.chargColor{
text-align: center;
font-size: 14px;
color: #fff;
font-weight: 700;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);
padding: 0px 2px;
}
.chargColor1{
background: rgb(0, 160, 220);
}
.chargColor2{
color: rgb(255, 255, 255);
}
.chargColor3{
color: rgba(255, 255, 255, 0.4);
}
.iconfont{
font-size: 20px; line-height: 38px; position: relative; top: 3px;
}
.chargColor4{
color: rgb(255, 255, 255);
}
.ball-container{
  position: fixed;
  left: 32px;
  bottom: 24px;
  z-index: 1;
}
.innericon{
  padding: 6px;
  font-size: 24px;
  line-height: 24px;
  color: rgb(0, 160, 220);
  transition: all .1s cubic-bezier(0.49, -0.29, 0.75, 0.41);
}
.inner{
  transition: all .1s linear;
}
.paycolor{
  background: rgb(0, 160, 220);
  color: rgb(255, 255, 255);
}
.cartList{
position: fixed;
top: 0;
height:100%;
width:100%;
background: rgba(7,17,27,0.8)
}
.foodList{
position: fixed;
bottom: 46px;
max-height: 200px;
overflow: hidden;
background: #fff;
width: 100%;
z-index: 10;
padding-bottom: 15px;
transition: all .4s;
}
.cartNum, .cartAdd{
  display: inline-block;
}
.control-inner{
  padding: 6px;
  font-size: 24px;
  line-height: 24px;
  color: rgb(0, 160, 220);
  display: inline-block;
  transition: all .4s linear;
}
.cartNum{
  font-size: 10px;
  line-height: 24px;
  position: relative;
  bottom: 4px;
  transform: rotate(0);
  transition: all .4s linear;
  animation-name:mymove;
  animation-duration: .4s;
}
.count{
  animation-name:myMove;
  animation-duration: .4s;
}
.cartAdd{
  font-size: 24px;
  line-height: 24px;
  color: rgb(0, 160, 220);
  padding: 6px;
}
.carttransition-enter{
  opacity: 0;
  transform: translate3D(0, 100%, 0);
}
.carttransition-leave-to{
  opacity: 0;
  transform: translate3D(0, 100%, 0);
}
</style>
